.video_item {
  @apply relative rounded-2xl overflow-hidden;
  background-color: #252836;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);

  &.small {
    .information {
      .name {
        @apply mt-3;

        font-size: 1.1rem;
        -webkit-line-clamp: 1;
      }
    }
  }

  .thumbnail {
    @apply relative;

    > time {
      @apply rounded-md absolute text-white flex items-center justify-center text-xs w-16 h-6 right-1.5 top-1.5;
      background-color: rgba(0, 0, 0, 0.5);

      &.bottom {
        @apply top-auto botom-3 right-3;
      }
    }
  }

  .information {
    @apply p-4;

    .author {
      @apply font-normal text-gray-500;
      font-size: 1.15rem;
    }

    .name {
      @apply text-white font-medium my-2.5;
      font-size: 1.3rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.number_info {
  @apply flex items-center;

  > div {
    @apply text-xs text-gray-500;
  }
}

.large_item {
  .information {
    @apply z-10 relative p-7;
    max-width: 20rem;

    .name {
      @apply text-lg leading-snug mb-8 mt-0 block;
      -webkit-line-clamp: 4;
    }

    .author {
      @apply text-white text-tiny mt-2;
    }

    .number_info {
      @apply mt-1;
      > div {
        @apply text-white text-opacity-90;
      }
    }
  }

  .thumbnail {
    @apply relative flex items-center;
    height: 22rem;

    &::before {
      @apply w-full h-full absolute top-0 left-0;
      z-index: 1;
      content: '';

      background: linear-gradient(
                      90deg,
                      rgba(#16151f, 0.6) 2%,
                      rgba(#16151f, 0.5) 9%,
                      rgba(#16151f, 0.4) 16%,
                      rgba(#16151f, 0.3) 23%,
                      rgba(#16151f, 0.2) 30%,
                      rgba(#16151f, 0.14) 37%,
                      rgba(#16151f, 0.1) 39%,
                      rgba(#16151f, 0) 40%
      );
    }

    .bg-image {
      @apply object-center object-cover pointer-events-none;
    }
  }
}
